<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated style="left: 0">
      <q-toolbar class="top-bar">
        <q-toolbar-title>
          QPCR测试仪
          <span style="font-size: 12px">v{{ $q.version }}</span>
        </q-toolbar-title>
        <div class="time q-mr-lg">{{ currentTime }}</div>
        <q-icon name="logout" size="sm" @click="goIndex()"></q-icon>
      </q-toolbar>
    </q-header>
    <q-drawer
      v-model="router.isShowDrawer"
      show-if-above
      :width="180"
      :breakpoint="400"
      bordered
    >
      <q-list style="margin-top: 50px">
        <q-item class="menu-item" to="/SingleStepTest" aria-setsize="lg">
          <q-item-section avatar>
            <q-icon name="inbox" />
          </q-item-section>
          <q-item-section>单步调试 </q-item-section>
        </q-item>
        <q-item class="menu-item" to="/ConnectTesting">
          <q-item-section avatar>
            <q-icon name="star" />
          </q-item-section>
          <q-item-section> 连接检测 </q-item-section>
        </q-item>
        <q-item class="menu-item" to="/DownloadPath">
          <q-item-section avatar>
            <q-icon name="star" />
          </q-item-section>
          <q-item-section> 下载路径 </q-item-section>
        </q-item>
        <q-item class="menu-item" to="/ParameterSetting">
          <q-item-section avatar>
            <q-icon name="drafts" />
          </q-item-section>
          <q-item-section> 参数设置 </q-item-section>
        </q-item>
      </q-list>
      <div class="settings">
        <div class="serialPort q-ml-md">
          <q-toggle label="打开串口" left-label v-model="visible" />
          <div class="flex">
            <div>当前串口 <span class="q-ml-xs">COM2</span></div>
          </div>
        </div>
      </div>
    </q-drawer>
    <!-- Page Container -->
    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script setup>
import { computed, ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import EssentialLink from "components/EssentialLink.vue";
const router = useRouter();

const leftDrawerOpen = ref(false);
const visible = ref(true);
const model = ref(null);
const options = ref(["Google", "Facebook", "Twitter", "Apple", "Oracle"]);
function toggleDrawer() {
  leftDrawerOpen.value = !leftDrawerOpen.value;
}

const currentTime = ref(new Date().toLocaleTimeString());
const updateTime = () => {
  currentTime.value = new Date().toLocaleTimeString();
};
onMounted(() => {
  const intervalId = setInterval(updateTime, 1000);
  onUnmounted(() => clearInterval(intervalId));
  console.log(router.isShowDrawer);
});
const goIndex = () => {
  router.push("/");
};
</script>
<style lang="scss" scoped>
.top-bar {
  display: flex;
  .time {
    align-items: center;
  }
}
.menu-item {
  height: 80px;
  font-size: 18px;
}
.settings {
  position: absolute;
  bottom: 20px;
  z-index: 1000;
}
.container-box {
  margin: 20px;
  background-color: #fff;
  border: 2px solid #1976d2;
  border-radius: 3px;
}
</style>
